import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Col, Button, Form, Input } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
@Form.create()
class MqttEncoderProtocol extends PureComponent {
  render() {
    const { form, dispatch, detail, param } = this.props;
    const saveMqttEncoder = () => {
      form.validateFields((error, fieldsValue) => {
        if (error) return;
        dispatch({
          type: 'product/addOrUpdateMqttProtocol',
          payload: {
            id: fieldsValue.id,
            protocolId: param,
            name: fieldsValue.name,
            content: fieldsValue.content,
            type: 1,
          },
          form,
        });
      });
    };
    return (
      <div>
        <Row style={{ marginTop: 15 }}>
          <Col span={12}>
            <span style={{ fontWeight: 'bold', fontSize: 20 }}>
              <FormattedMessage id="app.dm.product.protocol.mqtt.encoder" />
            </span>
          </Col>
          <Col style={{ textAlign: 'right' }}>
            <Button onClick={saveMqttEncoder} type="primary">
              <FormattedMessage id="app.dm.product.protocol.mqtt.encoder.add" />
            </Button>
          </Col>
        </Row>
        <Row style={{ marginTop: 15 }}>
          <FormItem style={{ marginTop: 0, marginBottom: 0 }}>
            {form.getFieldDecorator('id', { initialValue: detail ? detail.id : undefined })(
              <Input type="hidden" />,
            )}
          </FormItem>
          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.mqtt.encoder.name' })}
            colon={false}
          >
            {form.getFieldDecorator('name', {
              initialValue: detail ? detail.name : undefined,
              rules: [
                {
                  required: true,
                  message: formatMessage({ id: 'app.dm.product.protocol.mqtt.encoder.name.place' }),
                },
              ],
            })(
              <Input
                placeholder={formatMessage({
                  id: 'app.dm.product.protocol.mqtt.encoder.name.place',
                })}
              />,
            )}
          </FormItem>
        </Row>
        <Row>
          <FormItem
            label={formatMessage({ id: 'app.dm.product.protocol.mqtt.encoder.content' })}
            colon={false}
          >
            {form.getFieldDecorator('content', {
              initialValue: detail ? detail.content : undefined,
              rules: [
                {
                  required: true,
                  message: formatMessage({
                    id: 'app.dm.product.protocol.mqtt.encoder.content.place',
                  }),
                },
              ],
            })(
              <TextArea
                placeholder={formatMessage({
                  id: 'app.dm.product.protocol.mqtt.encoder.content.place',
                })}
                rows={5}
              />,
            )}
          </FormItem>
        </Row>
      </div>
    );
  }
}
export default MqttEncoderProtocol;
